<template>
  <div>
    <div class="top_title">
      <div>中</div>
      <div>医</div>
      <div>药</div>
      <div>大</div>
      <div>全</div>
    </div>
    <div class="left_details_div">
      <div class="left_margin">
        <div class="left_div" v-for="(item, index) in details" :key="index">
          <div class="left_div_wrapper">
            <router-link :to="{ name: 'About', params: { id: item.id } }">
              <div class="left_div_option">
                <div class="left_banner"><img :src="item.thumb" /></div>
                <p class="left_div_title">书籍名称：{{ item.name }}</p>
                <p class="left_div_text">{{ item.content }}</p>
                <p class="left_more">
                  <router-link to="/" class="left_more_router">
                    查看更多&gt;&gt;&gt;
                  </router-link>
                </p>
              </div>
            </router-link>
          </div>
          <div class="left_div_wrapper">
            <router-link :to="{ name: 'About', params: { id: item.id } }">
              <div class="left_div_option">
                <div class="left_banner"><img :src="item.thumb" /></div>
                <p class="left_div_title">书籍名称：{{ item.name }}</p>
                <p class="left_div_text">{{ item.content }}</p>
                <p class="left_more">
                  <router-link to="/" class="left_more_router">
                    查看更多&gt;&gt;&gt;
                  </router-link>
                </p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <paging></paging>
  </div>
</template>

<style scoped>
.left_details_div {
  width: 978px;
  overflow: hidden;
  background: url("../assets/705001088262418139.png") no-repeat top center,
    url("../assets/705001088262418139.png") no-repeat bottom center;
  padding-bottom: 107px;
}
.top_title {
  width: 389px;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
}
.top_title div {
  font-family: "楷体";
  font-size: 36px;
  color: white;
  width: 69px;
  line-height: 68px;
  text-align: center;
  background-color: #a40000;
  border-radius: 34.5px;
}
.left_div {
  width: 710px;
  margin: 0 auto 40px;
  display: flex;
  justify-content: space-between;
}
.left_div_option {
  width: 295px;
  display: flex;
  flex-direction: column;
}
.left_banner {
  width: 295px;
}
.left_banner img {
  width: 100%;
}
.left_div_title {
  font-size: 23px;
  font-weight: bold;
  color: #a40000;
  text-align: center;
  height: 23px;
  margin: 19px auto 28px;
}
.left_div_text {
  font-size: 18px;
  line-height: 30px;
  color: #666666;
  text-indent: 1rem;
  width: 281px;
}
.left_more {
  text-align: right;
  color: #a40000;
  font-size: 16px;
  margin-top: 8px;
}
.left_margin {
  margin-top: 90px;
}
.left_more_router {
  color: #a40000;
}
</style>
<script>
import axios from "axios";
import paging from "../components/paging.vue";
// import img from "../assets/图层 16(1).png";
export default {
  data() {
    return {
      details: [
        // {
        //   urll: "About",
        //   url: img,
        //   url2: img,
        //   title: "书籍名称：艾草的传说",
        //   title2: "书籍名称：艾草的传说",
        //   text:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   text2:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   more: "查看更多",
        //   url3: "About",
        // },
        // {
        //   urll: "About",
        //   url: img,
        //   url2: img,
        //   title: "书籍名称：艾草的传说",
        //   title2: "书籍名称：艾草的传说",
        //   text:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   text2:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   more: "查看更多",
        //   url3: "About",
        // },
        // {
        //   urll: "About",
        //   url: img,
        //   url2: img,
        //   title: "书籍名称：艾草的传说",
        //   title2: "书籍名称：艾草的传说",
        //   text:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   text2:
        //     "泽泻是一种传统的中药材，对于利尿效果非常不错，尤其是搭配各种其他种类的中药治病效果更佳，下面给...",
        //   more: "查看更多",
        //   url3: "About",
        // },
      ],
    };
  },
  components: {
    paging,
  },
  created() {
    axios
      .get("/index/book")
      .then((res) => {
        this.details = res.data.data;
        console.log(this.res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
